<template>
    <div>
        <div style="margin-bottom:10px;text-align:left">
            <b>表单列表</b>
        </div>
        <div style="text-align:left;">
            <div style="display:flex" v-for="(list, ix) in fromDivs" :key="ix">
                <div class="nodeCard"
                v-for="(item, i) in list" :key="i">
                    <Card v-if="!item.type" style="cursor: pointer;overflow: hidden;">
                        <div @click="goEdit(item.id)">
                          <div class="text_hidden">
                              <b style="font-size:20px">{{item.fromName}}</b>
                          </div>
                          <div>
                              <span class="tips">{{item.tableName}}</span>
                          </div>
                        </div>
                        <div style="text-align:right">
                          <Dropdown transfer>
                            <a>
                              <Icon type="ios-more" :size="20"/>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem @click.native="editForm(item)">编辑</DropdownItem>
                                <DropdownItem @click.native="delForm(item)">
                                  <span style="color:#ed4014">删除</span>
                                </DropdownItem>
                            </DropdownMenu>
                          </Dropdown>
                        </div>
                        <div style="text-align:right">
                            <span class="tips">{{item.createTime}}</span>
                        </div>
                    </Card>
                    <Card v-else-if="item.type === 'add'" style="height:100%;overflow: hidden;" class="data_add">
                        <div style="display: flex;height: 100%;align-items: center;justify-content: center;">
                          <Tooltip  trigger="hover" placement="top-start" content="新建表单" max-width="200" transfer>
                            <Icon type="md-add" :size="50" style="cursor: pointer;" @click="formInfo.flag = true;formInfo.isCreate = true"/>
                          </Tooltip >
                        </div>
                    </Card>
                    <Card v-else-if="item.type === 'refresh'" style="height:100%;overflow: hidden;" class="data_add">
                        <div style="display: flex;height: 100%;align-items: center;justify-content: center;">
                          <Tooltip  trigger="hover" placement="top-start" content="刷新" max-width="200" transfer>
                            <Icon type="md-refresh" :size="50" style="cursor: pointer;" @click="getFroms(fromsPage.pageNo)"/>
                          </Tooltip >
                        </div>
                    </Card>
                </div>
            </div>
            <div style="margin-top:10px">
                <Page :total="fromsPage.total"
                :page-size="pageSize" @on-change="getFroms"
                :current="fromsPage.pageNo" size="small" simple show-total style="margin-top:10px;text-align:center"/>
            </div>
        </div>
        <!-- 新建表单 -->
        <Modal v-model="formInfo.flag" title="创建表单" footer-hide draggable>
          <Form :model="formInfo.data" label-position="top" ref="formInfo" :rules="formInfo.rules">
              <FormItem label="表单名称" prop="fromName">
                  <Input type="text" v-model="formInfo.data.fromName" maxlength="100"
                  placeholder="请填写表单名称" show-word-limit></Input>
              </FormItem>
              <FormItem label="数据库表名">
                  <Input type="text" v-model="formInfo.data.tableName" maxlength="20"
                  placeholder="请填写数据库表名" show-word-limit></Input>
              </FormItem>
              <FormItem>
                <div style="text-align:right">
                  <Button @click="formInfo.flag = false">取消</Button>
                  <Button type="primary" @click="ecfrom(formInfo.isCreate)">确认</Button>
                </div>
              </FormItem>
          </Form>
        </Modal>
    </div>
</template>

<script>
import store from '../../store/index'
export default {
  name: 'Froms',
  data () {
    return {
      pageSize: 10,
      // 表单数据列
      froms: [],
      fromDivs: [],
      fromsPage: {
        pageNo: 1,
        total: 0
      },
      // 表单详情
      formInfo: {
        flag: false,
        isCreate: true,
        data: {
          id: '',
          fromName: '',
          tableName: ''
        },
        rules: {
          fromName: [
            {required: true, message: '请填写表单名称', trigger: 'blur'}
          ]
        }
      }
    }
  },
  computed: {
    froms_store () {
      return store.state.froms
    }
  },
  watch: {
    'froms_store': {
      deep: true,
      immediate: true,
      handler: function (e, old) {
        this.froms = e
      }
    }
  },
  methods: {
    // 检查权限
    checkRole (roles) {
      return this.lsedata.checkRole(roles)
    },
    getDivList (n, dataList) {
      let divList = this.lseutil.getDivList(n, dataList)
      return divList
    },
    // 读取表单列表
    getFroms (pageNo) {
      let load = this.lseutil.loading('正在读取表单列表', 6)
      this.lseajax.get(this.lseajax.baseurl + '/api/from/list', {
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then((res) => {
        load.close()
        if (res.code === 200) {
          this.froms = res.data.records
          this.fromsPage.pageNo = pageNo
          this.fromsPage.total = res.data.total
          this.fromDivs = this.getDivList(5, this.froms)
        } else {
          this.lseutil.notice({
            info: res.msg,
            type: 2
          })
        }
      }).catch(res => {
        load.close()
      })
    },
    goEdit (id) {
      this.lseutil.go('fieldedit?fid=' + id)
    },
    // 编辑or新增表单
    ecfrom (isCreate) {
      let json = this.lseutil.objCopy(this.formInfo.data)
      if (isCreate) {
        delete json.id
      }
      let that = this
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          let load = this.lseutil.loading('正在保存', 6)
          this.lseajax.post(this.lseajax.baseurl + '/api/from/ecfrom',
            json
          ).then((res) => {
            load.close()
            if (res.code === 200) {
              this.lseutil.notice({
                info: res.msg,
                type: 1
              })
              that.formInfo.flag = false
              that.getFroms(1)
            } else {
              this.lseutil.notice({
                info: res.msg,
                type: 2
              })
            }
          }).catch(res => {
            load.close()
          })
        }
      })
    },
    editForm (item) {
      this.formInfo.data.id = item.id
      this.formInfo.data.fromName = item.fromName
      this.formInfo.data.tableName = item.tableName
      this.formInfo.flag = true
      this.formInfo.isCreate = false
    },
    delForm (item) {
      let that = this
      this.lseutil.alert('确认删除该表单？表单内包含数据则无法删除', {
        onOk () {
          let load = this.lseutil.loading('正在删除', 6)
          this.lseajax.post(this.lseajax.baseurl + '/api/from/delform', {
            form: item.id
          }).then((res) => {
            load.close()
            if (res.code === 200) {
              that.getFroms(1)
            } else {
              this.lseutil.notice({
                info: res.msg,
                type: 2
              })
            }
          }).catch(res => {
            load.close()
          })
        }
      })
    }
  },
  mounted () {
    this.getFroms(1)
  }
}
</script>

<style scoped>
>>>.data_add .ivu-card-body{
    height: 100%;
}
.nodeCard {
  margin:10px;
  width:100%;
  max-width:calc(20% - 20px);
  text-align:center;
  display:inline-grid
}
</style>
